<template>
    <view
        class="pages"
        :style="{ backgroundColor: typelist[tabIndex].rgbColor }"
    >
        <view class="search-top-box" id="navbar">
            <u-navbar
                back-icon-color="#ffffff"
                :is-back="false"
                :border-bottom="false"
                :background="typelist[tabIndex].background"
            >
                <view class="mp-name">
                    <!-- #ifndef APP-PLUS -->
                    <text>{{ i18n('index').appName }}</text>
                    <!-- #endif -->
                </view>
                <view class="slot-wrap"><view class="search-wrap"></view></view>
            </u-navbar>
        </view>

        <view class="main">
            <scroll-view
                :scroll-y="true"
                :show-scrollbar="true"
                :scroll-anchoring="true"
                :enable-flex="true"
                :style="{ height: mainScrollHeight + 'px' }"
                class="main-scroll"
                :scroll-with-animation="true"
            >
                <!-- 头部 -->
                <!-- #ifdef MP -->
                <view class="header" v-if="userInfo">
                    <view class="box">
                        <view @click="copyOpeind">
                            <open-data type="userAvatarUrl"></open-data>
                        </view>
                        <view @click="getUserInfo">
                            <view>
                                {{ i18n('user').welcomeText }}：
                                <open-data type="userNickName"></open-data>
                            </view>
                            <block v-if="!isShowxx">
                                <view>
                                    {{ i18n('user').groupName }}：{{
                                        userInfo &&
                                        userInfo.group_name &&
                                        userInfo.group_name
                                            ? userInfo.group_name
                                            : '-'
                                    }}
                                </view>
                                <view>
                                    {{ i18n('user').expireTime }}：{{
                                        userInfo &&
                                        userInfo.expire_time &&
                                        userInfo.expire_time
                                            ? userInfo.expire_time
                                            : '-'
                                    }}
                                </view>
                            </block>
                        </view>
                    </view>
                </view>
                <view class="header" @click="goLogin" v-else>
                    <view class="box-column">
                        <view>
                            <image src="@/static/icons/avatar.png"></image>
                        </view>
                        <view>{{ i18n('user').noLogin }}</view>
                    </view>
                </view>
                <!-- #endif -->
                <!-- #ifndef MP -->
                <view class="header" v-if="userInfo">
                    <view class="box">
                        <view>
                            <image
                                :src="
                                    userInfo.avatar
                                        ? userInfo.avatar
                                        : '../../static/icons/avatar.png'
                                "
                            ></image>
                        </view>
                        <view @click="getUserInfo">
                            <view>
                                {{ i18n('user').welcomeText }}：
                                <text>{{ userInfo.username }}</text>
                            </view>

                            <view>
                                {{ i18n('user').groupName }}：{{
                                    userInfo &&
                                    userInfo.group_name &&
                                    userInfo.group_name
                                        ? userInfo.group_name
                                        : '-'
                                }}
                            </view>
                            <view>
                                {{ i18n('user').expireTime }}：{{
                                    userInfo &&
                                    userInfo.expire_time &&
                                    userInfo.expire_time
                                        ? userInfo.expire_time
                                        : '-'
                                }}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="header" @click="goLogin" v-else>
                    <view class="box-column">
                        <view>
                            <image src="@/static/icons/avatar.png"></image>
                        </view>
                        <view>{{ i18n('user').noLogin }}</view>
                    </view>
                </view>
                <!-- #endif -->

                <!-- 导航 -->
                <view
                    class="nav-box"
                    :style="{ color: typelist[tabIndex].rgbColor }"
                >
                    <!-- #ifndef APP-PLUS -->
                    <u-card
                        border-radius="18"
                        :head-border-bottom="false"
                        :foot-border-top="false"
                        :show-head="true"
                        :show-foot="false"
                        :border="false"
                        padding="20"
                        :style="{ width: '100%', background: 'rgba(0,0,0,0)' }"
                        :head-style="{
                            backgroundColor: 'rgba(0,0,0,0)',
                            fontWeight: 'bold'
                        }"
                        :body-style="{ background: 'rgba(0,0,0,0)' }"
                        :title-color="typelist[tabIndex].color"
                        title-size="34"
                        :title="
                            !isShowxx
                                ? i18n('user').watchHistory
                                : i18n('user').lookHistory
                        "
                        v-if="userInfo && historyList.length > 0"
                        box-shadow="3px 3px 10px rgba(0, 0, 0, 0.2)"
                    >
                        <view class="" slot="body">
                            <!-- <u-cell-group>
                                <u-cell-item icon="setting-fill" title="个人设置"></u-cell-item>
                                <u-cell-item icon="setting-fill" title="个人设置"></u-cell-item>
                                <u-cell-item icon="setting-fill" title="个人设置"></u-cell-item>
                                <u-cell-item icon="setting-fill" title="个人设置"></u-cell-item>
                                <u-cell-item icon="setting-fill" title="个人设置"></u-cell-item>
                            </u-cell-group> -->
                            <!-- 历史记录 -->
                            <scroll-view
                                :scroll-x="true"
                                :show-scrollbar="true"
                                :scroll-anchoring="true"
                                class="history-video-scroll"
                                :enable-flex="true"
                                :scroll-with-animation="true"
                            >
                                <block
                                    v-for="(item, index) in historyList"
                                    :key="index"
                                >
                                    <view
                                        @click="goDetail(item.id, item.index)"
                                        @longpress="historyLongpress(index)"
                                        class="history-video-item"
                                        :style="{
                                            backgroundImage:
                                                'url(' +
                                                (item.img.search('http') >= 0
                                                    ? item.img
                                                    : imageUrl + item.img) +
                                                ')',
                                            backgroundSize: '100% 100%'
                                        }"
                                    >
                                        <text>{{ item.title }}</text>
                                        <text
                                            v-if="!isShowxx && item.type == 1"
                                        >
                                            {{ i18n('user').wacthed
                                            }}{{
                                                getCurrentTime(
                                                    item.title,
                                                    item.index
                                                )
                                            }}
                                        </text>
                                        <text
                                            v-if="!isShowxx && item.type == 2"
                                        >
                                            {{ i18n('user').di
                                            }}{{ parseInt(item.index) + 1
                                            }}{{ i18n('user').jiWacth
                                            }}{{
                                                getCurrentTime(
                                                    item.title,
                                                    item.index
                                                )
                                            }}
                                        </text>
                                    </view>
                                </block>
                            </scroll-view>
                        </view>
                    </u-card>
                    <u-card
                        border-radius="18"
                        :head-border-bottom="false"
                        :foot-border-top="false"
                        :show-head="true"
                        :show-foot="false"
                        :border="false"
                        padding="20"
                        :style="{ width: '100%', background: 'rgba(0,0,0,0)' }"
                        :head-style="{
                            backgroundColor: 'rgba(0,0,0,0)',
                            fontWeight: 'bold'
                        }"
                        :body-style="{ background: 'rgba(0,0,0,0)' }"
                        :title-color="typelist[tabIndex].color"
                        title-size="34"
                        :title="i18n('user').baseFunction"
                        box-shadow="3px 3px 10px rgba(0, 0, 0, 0.2)"
                    >
                        <view class="func" slot="body">
                            <u-row gutter="16">
                                <u-col span="4">
                                    <view class="func-item" @click="ucenter">
                                        <u-icon
                                            name="account-fill"
                                            :color="typelist[tabIndex].color"
                                            size="60"
                                        ></u-icon>
                                        <text>
                                            {{ i18n('user').acctountText }}
                                        </text>
                                    </view>
                                </u-col>
                                <u-col span="4">
                                    <view class="func-item" @click="feedback">
                                        <u-icon
                                            name="server-man"
                                            :color="typelist[tabIndex].color"
                                            size="60"
                                        ></u-icon>
                                        <text>
                                            {{ i18n('user').feedbackText }}
                                        </text>
                                    </view>
                                </u-col>
                                <u-col span="4">
                                    <view class="func-item" @click="setting">
                                        <u-icon
                                            name="setting-fill"
                                            :color="typelist[tabIndex].color"
                                            size="60"
                                        ></u-icon>
                                        <text>{{ i18n('user').setting }}</text>
                                    </view>
                                </u-col>
                            </u-row>
                        </view>
                    </u-card>
                    <!-- #endif -->
                    <!-- #ifdef APP-PLUS -->
                    <u-card
                        border-radius="18"
                        :head-border-bottom="false"
                        :foot-border-top="false"
                        :show-head="true"
                        :show-foot="false"
                        :border="false"
                        padding="20"
                        :style="{
                            width: '90%',
                            background: 'rgba(255,255,255,0.8)'
                        }"
                        :head-style="{
                            backgroundColor: 'rgba(255,255,255,0.8)',
                            fontWeight: 'bold'
                        }"
                        :body-style="{ background: 'rgba(255,255,255,0.8)' }"
                        title-color="#000000"
                        title-size="34"
                        :title="i18n('user').watchHistory"
                        box-shadow="3px 3px 10px rgba(0, 0, 0, 0.2)"
                        v-if="userInfo && historyList.length > 0"
                    >
                        <view class="" slot="body">
                            <scroll-view
                                :scroll-x="true"
                                :show-scrollbar="true"
                                :scroll-anchoring="true"
                                class="history-video-scroll"
                                :enable-flex="true"
                            >
                                <block
                                    v-for="(item, index) in historyList"
                                    :key="index"
                                >
                                    <view
                                        @click="goDetail(item.id, item.index)"
                                        @longpress="historyLongpress(index)"
                                        class="history-video-item"
                                        :style="{
                                            backgroundImage:
                                                'url(' +
                                                (item.img.search('http') >= 0
                                                    ? item.img
                                                    : imageUrl + item.img) +
                                                ')',
                                            backgroundSize: '100% 100%'
                                        }"
                                    >
                                        <text>{{ item.title }}</text>
                                        <text
                                            v-if="!isShowxx && item.type == 1"
                                        >
                                            {{ i18n('user').wacthed
                                            }}{{
                                                getCurrentTime(
                                                    item.title,
                                                    item.index
                                                )
                                            }}
                                        </text>
                                        <text
                                            v-if="!isShowxx && item.type == 2"
                                        >
                                            {{ i18n('user').di
                                            }}{{ parseInt(item.index) + 1
                                            }}{{ i18n('user').jiWacth
                                            }}{{
                                                getCurrentTime(
                                                    item.title,
                                                    item.index
                                                )
                                            }}
                                        </text>
                                    </view>
                                </block>
                            </scroll-view>
                        </view>
                    </u-card>

                    <u-card
                        border-radius="18"
                        :head-border-bottom="false"
                        :foot-border-top="false"
                        :show-head="true"
                        :show-foot="false"
                        :border="false"
                        padding="20"
                        :style="{
                            width: '90%',
                            background: 'rgba(255,255,255,0.8)'
                        }"
                        :head-style="{
                            backgroundColor: 'rgba(255,255,255,0.8)',
                            fontWeight: 'bold'
                        }"
                        :body-style="{ background: 'rgba(255,255,255,0.8)' }"
                        title-color="#000000"
                        title-size="34"
                        :title="i18n('user').baseFunction"
                        box-shadow="3px 3px 10px rgba(0, 0, 0, 0.2)"
                    >
                        <view class="func" slot="body">
                            <u-row gutter="16">
                                <u-col span="4">
                                    <view class="func-item" @click="ucenter">
                                        <u-icon
                                            name="account-fill"
                                            :color="typelist[tabIndex].color"
                                            size="60"
                                        ></u-icon>
                                        <text>
                                            {{ i18n('user').acctountText }}
                                        </text>
                                    </view>
                                </u-col>
                                <u-col span="4">
                                    <view class="func-item" @click="feedback">
                                        <u-icon
                                            name="server-man"
                                            :color="typelist[tabIndex].color"
                                            size="60"
                                        ></u-icon>
                                        <text>
                                            {{ i18n('user').feedbackText }}
                                        </text>
                                    </view>
                                </u-col>
                                <u-col span="4">
                                    <view class="func-item" @click="setting">
                                        <u-icon
                                            name="setting-fill"
                                            :color="typelist[tabIndex].color"
                                            size="60"
                                        ></u-icon>
                                        <text>{{ i18n('user').setting }}</text>
                                    </view>
                                </u-col>
                            </u-row>
                        </view>
                    </u-card>
                    <!-- #endif -->
                </view>
            </scroll-view>
        </view>
        <u-tabbar
            id="uTabbar"
            v-model="tarbarObj.tarbarCurrent"
            :list="tarbarObj.tarbarList"
            :border-top="true"
            :mid-button="tarbarObj.midButton"
            bg-color="#fff"
            :inactiveColor="typelist[tabIndex].color"
            :activeColor="tarbarObj.activeColor"
            icon-size="40"
            :height="tarbarObj.height"
            mid-button-size="80"
        ></u-tabbar>

        <uni-fab
            v-show="userInfo && userInfo.has_msg"
            :styles="styles"
            :pattern="pattern"
            :content="content"
            :horizontal="horizontal"
            :vertical="vertical"
            :direction="direction"
            @trigger="trigger"
        ></uni-fab>
    </view>
</template>

<script>
import uniFab from '@/components/uni-fab/uni-fab.vue';
import hex_md5 from '@/common/md5.js';
const MyApp = getApp();
const globalData = MyApp.globalData;
export default {
    components: {
        uniFab
    },
    data() {
        return {
            tabIndex: 0,
            typelist: globalData.typelist,
            tarbarObj: globalData.tarbarObj,
            userInfo: [],
            mainHeight: 0,
            mainScrollHeight: 0,
            imageUrl: this.$config.imageUrl,
            apiImageUrl: this.$config.apiImageUrl,
            historyList: [],
            isShowxx: true,
            sys_config: null,

            directionStr: '垂直',
            horizontal: 'right',
            vertical: 'bottom',
            direction: 'horizontal',
            pattern: {
                color: '#7A7E83',
                backgroundColor: '#fff',
                selectedColor: '#282C35',
                opacity: 0.7
            },
            content: [
                {
                    text: '消息',
                    active: false
                }
            ],
            styles: {
                color: '#3c3e49',
                selectedColor: '#282C35',
                backgroundColor: '#fff',
                buttonColor: '#282C35'
            }
        };
    },
    computed: {
        i18n() {
            return globalData.$t;
        }
    },
    onReady() {
        this.initPage();
        this.pattern.selectedColor = this.typelist[this.tabIndex].color;
        this.styles.buttonColor = this.typelist[this.tabIndex].color;
    },
    onShow() {
        let _this = this;
        _this.tabIndex = uni.getStorageSync('tabIndex') || 0;
        _this.userInfo = MyApp.checkLogin();
        _this.historyList = uni.getStorageSync('historyList');
        _this.refershUserInfo();
    },
    methods: {
        trigger(e) {
            this.content[e.index].active = !e.item.active;
            switch (e.index) {
                case 1:
                    this.$u.route('/packageA/pages/user/child/msg');
                    break;
                default:
                    this.$u.route('/packageA/pages/user/child/msg');
                    break;
            }
        },
        refershUserInfo() {
            let _this = this;
            _this.$http
                .post('/videos/config/getConfig', {})
                .then(function(res) {
                    uni.stopPullDownRefresh();
                    uni.setStorageSync('sys_config', res.data);
                    _this.sys_config = res.data;
                    // 中心审核状态
                    if (
                        res.data.show_xx == 0 &&
                        res.data.member_group_switch &&
                        res.data.userinfo &&
                        res.data.userinfo.group_id >=
                            res.data.member_group_limit
                    ) {
                        _this.isShowxx = false;
                    }
                })
                .then(v => {
                    _this.getUserInfo();
                });
        },
        getUserInfo() {
            let _this = this;
            _this.$http.post('/user/user/home', {}).then(function(ret) {
                // 如果超时了
                if (ret.code == 1200) {
                    _this.userInfo = null;
                    uni.removeStorageSync('userInfo');
                    uni.removeStorageSync('token');
                    // 如果没开审核，重新登录，小程序不允许强制用户登录
                    if (!_this.isShowxx) {
                        _this.goLogin();
                    }
                } else {
                    _this.userInfo.has_msg = ret.data.has_msg;
                    uni.setStorageSync('userInfo', ret.data);
                    // #ifdef MP
                    if (!ret.data.has_bind) {
                        _this.$u.toast('请到 “帐号管理 -> 绑定用户名” 绑定你的用户名', 3000);
                    }
                    // #endif
                    if (
                        _this.sys_config.member_group_switch &&
                        ret.data.group_id >= _this.sys_config.member_group_limit
                    ) {
                        _this.isShowxx = false;
                        globalData.centerShowxx = false;
                        _this.userInfo.group_name = ret.data.group_name;
                        _this.userInfo.group_id = ret.data.group_id;
                        _this.userInfo.expire_time = ret.data.expire_time;
                        _this.userInfo.nick = ret.data.nick;
                        _this.userInfo.username = ret.data.username;
                    } else {
                        _this.isShowxx = true;
                        globalData.centerShowxx = true;
                        _this.userInfo.group_name = ret.data.group_name;
                        _this.userInfo.group_id = ret.data.group_id;
                        _this.userInfo.expire_time = ret.data.expire_time;
                        _this.userInfo.nick = ret.data.nick;
                        _this.userInfo.username = ret.data.username;
                    }
                }
            });
        },
        goDetail(id, index) {
            if (parseInt(id) > 0) {
                MyApp.godetail(id);
            }
        },
        getCurrentTime(title, index) {
            let time = uni.getStorageSync(hex_md5(title + index));
            time = isNaN(parseInt(time)) ? 0 : parseInt(time);
            if (time < 60) {
                return parseInt(time) + this.i18n('user').sec;
            }

            if (time > 60 && time / 60 < 60) {
                return parseInt(time / 60) + this.i18n('user').min;
            }

            if (time / 60 > 60) {
                return parseInt(time / 60 / 60) + this.i18n('user').hour;
            }
        },
        goLogin() {
            MyApp.checkLogin(true);
        },
        initPage() {
            let _this = this;
            uni.getSystemInfo({
                success: res => {
                    let query = uni.createSelectorQuery().in(_this);
                    query.select('#uTabbar').boundingClientRect();
                    query.exec(re => {
                        let uTabbarHeight = re[0].height;
                        _this.mainScrollHeight =
                            res.windowHeight - uTabbarHeight - 58;
                    });
                }
            });
        },
        setting() {
            uni.navigateTo({
                url: '/packageA/pages/user/setting'
            });
        },
        ucenter() {
            MyApp.checkLogin(true, function() {
                uni.navigateTo({
                    url: '/packageA/pages/user/ucenter'
                });
            });
        },
        feedback() {
            uni.navigateTo({
                url: '/packageA/pages/user/feedback'
            });
        },
        historyLongpress(index) {
            let _this = this;
            uni.showModal({
                title: '提示',
                content: '是否要删除此记录？',
                success: function(res) {
                    if (res.confirm) {
                        _this.historyList.splice(index, 1);
                        uni.setStorageSync('historyList', _this.historyList);
                    }
                }
            });
        },
        copyOpeind() {
            let userinfo = uni.getStorageSync('userInfo');
            if (userinfo) {
                uni.setClipboardData({
                    data: userinfo.openid,
                    success: function() {
                        uni.showToast({
                            title: '复制成功',
                            icon: 'none'
                        });
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.pages {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    .search-top-box {
        .mp-name {
            color: #fff;
            flex: 1;
            padding-left: 40upx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .slot-wrap {
            display: flex;
            align-items: center;
            flex: 1;

            .search-wrap {
                flex: 1;
                margin: 0 20upx;
            }
        }
    }
    .main {
        z-index: 1;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        width: 100%;
        .main-scroll {
            .header {
                z-index: 2;
                color: #ffffff;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                align-content: center;
                margin-bottom: 30upx;
                width: 750upx;
                position: relative;
                .box {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    align-items: center;
                    align-content: center;
                    z-index: 199907040528;
                    & > view:nth-child(1) {
                        overflow: hidden;
                        display: block;
                        width: 130upx;
                        height: 130upx;
                        min-height: 130upx;
                        border-radius: 50%;
                        border: 2px solid #fff;
                        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
                        align-content: center;
                        align-items: center;
                        & > image {
                            width: 132upx;
                            height: 122upx;
                        }
                    }
                    & > view:nth-child(2) {
                        padding: 0 16upx;
                    }
                }
                .box-column {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    align-content: center;
                    & > view:nth-child(1) {
                        overflow: hidden;
                        display: block;
                        width: 130upx;
                        height: 130upx;
                        min-height: 130upx;
                        border-radius: 50%;
                        border: 2px solid #fff;
                        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
                        align-content: center;
                        align-items: center;
                        & > image {
                            width: 130upx;
                            height: 130upx;
                        }
                    }
                    & > view:nth-child(2) {
                        padding: 10upx 0;
                    }
                }
            }
            .nav-box {
                z-index: 2;
                display: flex;
                flex-direction: column;
                align-items: center;
                align-content: center;
                width: 100%;
                position: relative;
                .history-video-scroll {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    overflow-x: auto;
                    white-space: nowrap;
                    max-height: 350upx;
                    .history-video-item {
                        flex: none;
                        width: 240upx;
                        height: 320upx;
                        border-radius: 20upx;
                        display: inline-flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        align-items: flex-start;
                        align-content: flex-start;
                        padding: 0;
                        font-size: 24rpx;
                        vertical-align: middle;
                        position: relative;
                        margin-right: 16upx;
                        > text {
                            width: 100%;
                            color: #ffffff;
                            background-color: rgba(0, 0, 0, 0.6);
                            padding: 5upx 10upx;
                        }
                        > text:nth-child(2) {
                            border-bottom-left-radius: 20upx;
                            border-bottom-right-radius: 20upx;
                        }
                    }
                }
                .func {
                    display: flex;
                    flex-direction: column;
                    .func-item {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        align-items: center;
                        align-content: center;
                        height: 150upx;
                    }
                }
            }
        }
    }
    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 380upx;
        min-width: 300vw;
        min-height: 320vw;
        background-color: #ffffff;
        animation: rote 10s linear infinite;
        z-index: 0;
    }
    &::before {
        left: -95%;
        border-radius: 45%;
        opacity: 0.5;
    }
    &::after {
        left: -95%;
        border-radius: 46%;
    }
    @keyframes rote {
        from {
            transform: rotateZ(0);
        }
        to {
            transform: rotateZ(360deg);
        }
    }
}
.u-card {
    background-color: #000000;
}
</style>
